<script setup>
import { ref } from 'vue';
import axios from '@/utils/axios.js';
import { useRouter } from 'vue-router';

const router = useRouter();
const productList = ref([]);

// 调用后端API获取商品列表
const fetchProducts = async () => {
  try {
    const res = await axios.get('/products');// 只有/products不用/api/products是因为我在utils/axios.ts中定义了springboot后端地址
    console.log(res);
    productList.value = res.data;
  } catch (err) {
    console.error('获取商品列表失败:', err);
  }
};

// 跳转到商品详情页
// const goToDetails = (id) => {
//   // push方法等同于用户点击<router-link>
//     router.push({name: 'details', params: {id}});
//     };

    // 初始化加载数据
    fetchProducts();
</script>

<template>
  <h1>购物车列表!</h1>
  <ul>
    <li v-for="product in productList" :key="product.id">
      <RouterLink :to="{ name: 'details', params: { id: product.id } }">
        {{ product.name }}
      </RouterLink>
    </li>
  </ul>
</template>